<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no" />
    <meta name="wap-font-scale"  content="no" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文件列表</title>

    <link th:href="@{/axui-v2.1.1/css/ax.css}" rel="stylesheet" type="text/css" >
    <link th:href="@{/axui-v2.1.1/css/ax-response.css}" rel="stylesheet" type="text/css" >
</head>
<body>
    <header class="ax-header">
        <div class="ax-row">
            <div class="ax-col">
                <a th:href="@{/download/index}" class="ax-logo">
                    <img th:src="@{/common/images/logo.png}" alt="File Management"/>
                </a>
            </div>
            <div class="ax-nav">
                <div class="ax-search">
                    <form name="search">
                        <label for="keyboard"></label>
                        <input name="keyboard" id="keyboard" placeholder="关键字..." th:value="${keyboard}" type="text">
                        <a href="javascript:void(0);" id="search" class="ax-iconfont ax-icon-search"></a>
                    </form>
                </div>
                <div class="ax-item ax-selected">
                    <a th:href="@{/download/index}" class="ax-text">文件列表</a>
                    <span class="ax-line"></span>
                </div>
                <div class="ax-item">
                    <a th:href="@{/upload/index}" class="ax-text">文件上传</a>
                    <span class="ax-line"></span>
                </div>
                <div class="ax-item">
                    <a th:href="@{/logging/index}" target="_blank" class="ax-text">在线日志</a>
                    <span class="ax-line"></span>
                </div>
            </div>
        </div>
    </header>
    <div class="ax-space-header"></div>
    <div class="ax-border ax-margin ax-radius-md" axCheckAll="checkDom:'#checkBtn',clearDom:'#clearBtn'">
        <div th:if="${#lists.isEmpty(files)} eq false" th:each="file,fileStat:${files}">
            <label class="ax-checkbox ax-bulletin">
                <input name="apple" th:value="${file.filename}" type="checkbox">
                <i class="ax-iconfont ax-icon-file" legend></i>
                <span class="ax-bulletin-body">
                    <i caption><span th:text="${file.filename}"></span></i>
                </span>
                <i count class="ax-margin-right">
                    <span th:text="${file.filetime}"></span>
                </i>
                <i count class="ax-margin-right">
                    <span th:text="${file.filesize}"></span>MB
                </i>
                <a href="javascript:void(0);" onclick="fileDel(this);"
                   th:value="${file.filepath}" class="ax-btn ax-sm ax-margin-right">
                    <span class="ax-iconfont ax-icon-trash-alt"></span>删除
                </a>
                <a href="javascript:void(0);" onclick="fileDown(this);"
                   th:name="${file.filename}" th:value="${file.filepath}" class="ax-btn ax-sm">
                    <span class="ax-iconfont ax-icon-arrow-down-o"></span>下载
                </a>
            </label>
            <hr class="ax-margin-lr"/>
        </div>
        <div th:if="${#lists.isEmpty(files)} eq true">
            <div class="ax-empty">
                <div class="ax-icon"><span class="ax-iconfont ax-icon-empty"></span></div>
                <div class="ax-title">暂无文件，请去上传！</div>
            </div>
        </div>
        <div class="ax-break"></div>
        <a href="###" class="ax-btn ax-margin-left" id="checkBtn">全选</a>
        <a href="###" class="ax-btn" id="clearBtn">取消全选</a>
        <a href="###" class="ax-btn" id="zipDownBtn">打包下载</a>
        <a href="###" class="ax-btn" id="batchDelBtn">批量删除</a>
        <div class="ax-break"></div>
    </div>
    <script th:src="@{/axui-v2.1.1/js/ax.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/common/js/basic.js}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" th:inline="javascript" charset="utf-8">
        const fileDel = (obj) => {
            const path = obj.getAttribute("value");
            const options = {
                url: Fmt.ctx() + '/download/delete',
                data: {path: path},
                method: 'post'
            };
            Fmt.axios(options).then((result) => {
                window.location.href = Fmt.ctx() + '/download/index';
            }).catch((err) => {
                new axMessage({content: err, result: 'error', iconShow: true}).show();
            });
        }

        const fileDown = (obj) => {
            const path = obj.getAttribute("value");
            window.open(Fmt.ctx() + '/download/file?path=' + encodeURIComponent(path) + '&temp=' + false);
        };

        window.onload = () => {
            document.getElementById("search").onclick = () => {
                const keyboard = document.getElementById("keyboard").value;
                window.location.href = Fmt.ctx() + '/download/index?keyboard=' + keyboard;
            }

            document.getElementById("zipDownBtn").onclick = () => {
                const list = document.getElementsByName("apple");
                const filenames = [];
                for (let key in list) {
                    if(list[key].checked){
                        const filename = list[key].getAttribute("value");
                        filenames.push(filename);
                    }
                }
                if(filenames.length === 0){
                    new axMessage({content: '请选择要下载的文件',result: 'warning',iconShow: true}).show();
                    return false;
                }
                let message = new axMessage({content: '',result: 'success',iconShow: true});
                message.update({content: '正在根据所选文件创建压缩包......', result: 'success'}).show();
                const options = {
                    url: Fmt.ctx() + '/download/packZip',
                    data: {filenames: filenames.join(",")},
                    method: 'post'
                };
                Fmt.axios(options).then((result) => {
                    message.update({content: '压缩包' + result.filename + "创建完成，准备下载文件......", result: 'success'}).show();
                    window.open(Fmt.ctx() + '/download/file?path=' + encodeURIComponent(result.path) + '&temp=' + true);
                }).catch((err) => {
                    console.log(err);
                    new axMessage({content: err, result: 'error', iconShow: true}).show();
                });
            }

            document.getElementById("batchDelBtn").onclick = () => {
                const list = document.getElementsByName("apple");
                const filenames = [];
                for (let key in list) {
                    if(list[key].checked){
                        const filename = list[key].getAttribute("value");
                        filenames.push(filename);
                    }
                }
                if(filenames.length === 0){
                    new axMessage({content: '请选择要删除的文件',result: 'warning',iconShow: true}).show();
                    return false;
                }
                const options = {
                    url: Fmt.ctx() + '/download/batchDel',
                    data: {filenames: filenames.join(",")},
                    method: 'post'
                };
                Fmt.axios(options).then((result) => {
                    window.location.href = Fmt.ctx() + '/download/index';
                }).catch((err) => {
                    new axMessage({content: err, result: 'error', iconShow: true}).show();
                });
            }
        }
    </script>
</body>
</html>